<template>
  <view class="profile h-full flex flex-col">
    <view class="mb-[10px] w-full h-[40px] bg-[#ffffff]" @click="clickMy">
      点我
    </view>
    <custom-ba-tree-picker
      ref="treePicker"
      :selected-data="modelvalue"
      :multiple="true"
      @select-change="selectChange"
      @cancel="cancel"
      title="选择"
      :localdata="listData"
      valueKey="id"
      textKey="name"
      childrenKey="children"
    />
  </view>
</template>

<script setup>
let treePicker = ref(null);
let modelvalue = [41, 42];
let listData = [
  {
    id: 1,
    name: "公司1",
    children: [
      {
        id: 11,
        name: "研发部",
        children: [
          {
            id: 111,
            name: "张三",
          },
          {
            id: 112,
            name: "李四",
          },
        ],
      },
      {
        id: 12,
        name: "综合部",
      },
    ],
  },
  {
    id: 2,
    name: "公司2",
    children: [
      {
        id: 21,
        name: "研发部",
      },
      {
        id: 22,
        name: "综合部",
      },
      {
        id: 23,
        name: "财务部",
      },
    ],
  },
  {
    id: 3,
    name: "公司3",
  },
  {
    id: 4,
    name: "公司4",
    children: [
      {
        id: 41,
        name: "研发部",
      },
      {
        id: 42,
        name: "研发部",
      },
      {
        id: 43,
        name: "研发部",
      },
      {
        id: 44,
        name: "研发部",
      },
      {
        id: 45,
        name: "研发部",
      },
      {
        id: 46,
        name: "研发部",
      },
    ],
  },
];

const clickMy = () => {
  treePicker.value?._show();
};
const cancel = () => {};
const selectChange = (ids, names) => {
  console.log(ids, names);
};
</script>

<style lang="scss" scoped></style>
